#{extends 'main.html' /}
#{set title:'Play Tic Tac Toe' /}
<div id="wrapper">
	<div id="title"><h1>TicTacToe</h1></div>
	<div id="toolbar">
		<div id="new"></div>
	</div>
	<div id="winner"></div>
	<div id="game-board">
		<div id="field-0" class="field">
			<div class="x">x</div>
			<div class="o">o</div>
		</div>
		<div id="field-1" class="field">
			<div class="x">x</div>
			<div class="o">o</div>
		</div>
		<div id="field-2" class="field">
			<div class="x">x</div>
			<div class="o">o</div>
		</div>
		<div id="field-3" class="field">
			<div class="x">x</div>
			<div class="o">o</div>
		</div>
		<div id="field-4" class="field">
			<div class="x">x</div>
			<div class="o">o</div>
		</div>
		<div id="field-5" class="field">
			<div class="x">x</div>
			<div class="o">o</div>
		</div>
		<div id="field-6" class="field">
			<div class="x">x</div>
			<div class="o">o</div>
		</div>
		<div id="field-7" class="field">
			<div class="x">x</div>
			<div class="o">o</div>
		</div>
		<div id="field-8" class="field">
			<div class="x">x</div>
			<div class="o">o</div>
		</div>
	</div>
</div>
<object id="oBeep" type="application/x-shockwave-flash" data="/public/images/flashbeep_alert.swf" width="1" height="1">
	<param name="movie" value="/public/images/flashbeep_alert.swf" />
</object>

<script type="text/javascript">
	$(function() {
		$("div#new").click(function(e) {
			e.preventDefault();
			$.get('@{startNewGame()}', function() {
				doCleanup();
			});
			$("div#winner").slideUp().html('');
		});
		$("div.field").hover(function() {
			var $this = $(this);
			$element = $('.x', this);
			if (!$this.hasClass('clicked') && !$('div#game-board').hasClass('waiting')) {
				$element.fadeTo(100, 0.2);
			}
		}, function() {
			var $this = $(this);
			$element = $('.x', this);
			if (!$this.hasClass('clicked')) {
				$element.hide();
			}
		});
		$("div.field").click(function(e){
			e.preventDefault();
			var $this = $(this);
			var id = $this.attr('id').substr(6);
			$element = $('.x', this);
			if (!$this.hasClass('clicked') && !$('div#game-board').hasClass('waiting')) {
				$this.addClass('clicked');
				$element.fadeTo(0, 1);
				$('div#game-board').addClass('waiting');
				$.post('@{doMove()}', { playerMove: id }, function(d) {

					if (d.winner != null) {
						if (d.winner == 'draw') {
							$("div#winner").html("It's a draw!");
						}
						else {
							setTimeout(function() {$("div#winner").html(d.winner + " is the winner!")}, 1000);
						}
						if (d.computerMove != null) {
							$('div#field-' + d.computerMove).addClass('clicked');
							setTimeout(function() {
								$('div#field-' + d.computerMove + ' div.o').fadeTo(200, 1);
								$('div#game-board').removeClass('waiting');
							}, 500);
						}
						$("div#winner").slideDown();
					}
					else if (d.computerMove != null) {
						$('div#field-' + d.computerMove).addClass('clicked');
						setTimeout(function() {
							$('div#field-' + d.computerMove + ' div.o').fadeTo(200, 1);
							$('div#game-board').removeClass('waiting');
						}, 500);
					}
				}, 'json');
			}
			else {
				doError($("div#game-board"));
			}
		});
		$.get('@{showStatus()}', function(d) {
			for (var field in d) {
				$('div#field-' + field + ' .' + d[field]).parent().addClass('clicked');
				$('div#field-' + field + ' .' + d[field]).show();
			}
		}, 'json');
	});

	function doCleanup() {
		$("div#game-board div.field").each(function() {
			$(this).removeClass('clicked');
			$('.x', this).hide();
			$('.o', this).hide();
		});
		$("div#game-board").removeClass('waiting');
		doBeep(1);
		doShake($("div#game-board"), 100, 500);
	}

	function doError($this)
	{
		doBeep(3);
		doShake($this, 100, 500);
	}
	function doShake($this, width, duration)
	{
		duration = duration / 5;
		doMove($this, parseInt($this.css('margin-left')) - width, duration, function()
		{
			doMove($this, parseInt($this.css('margin-left')) + (width * 2), duration, function()
			{
				doMove($this, parseInt($this.css('margin-left')) - (width / 2) - width, duration, function()
				{
					doMove($this, parseInt($this.css('margin-left')) + width, duration, function()
					{
						doMove($this, parseInt($this.css('margin-left')) - (width / 2), duration, function()
						{

						});
					});
				});
			});
		});
	}
	function doMove($this, marginLeft, duration, complete)
	{
		$this.animate({
			"margin-left": marginLeft
		}, {
			"duration": duration,
			"complete": complete
		});
	}
	function doBeep(s)
	{
		var o = document.getElementById('oBeep');
		try
		{
			o.play(s);
		}
		catch (err)
		{
			// do nothing
		}
	}
</script>